<template>
    <!-- 添加或修改子设备对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="open"
      width="500px" append-to-body
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">

        <!-- 设备ID -->
        <el-form-item v-if="visible" label="设备ID" prop="id">
          <el-input v-model="form.id" :disabled="true" placeholder="请输入设备ID"/>
        </el-form-item>

        <!-- 设备ID -->
        <el-form-item v-if="!visible" label="设备ID" prop="id">
          <el-input v-model="form.id" placeholder="请输入设备ID"/>
        </el-form-item>

        <!-- 设备名称 -->
        <el-form-item label="设备名称" prop="deviceName">
          <el-input v-model="form.deviceName" placeholder="请输入设备名称"/>
        </el-form-item>

        <!-- 产品名称 -->
        <el-form-item v-if="visible" label="所属产品" prop="productId">
          <el-select v-model="form.productId" :disabled="true" placeholder="请选择所属产品" class="select-width">
            <el-option
              v-for="dict in productList"
              :key="dict.id"
              :label="dict.productName"
              :value="dict.id"
            ></el-option>
          </el-select>
        </el-form-item>

        <!-- 产品名称 -->
        <el-form-item v-if="!visible" label="所属产品" prop="productId">
          <el-select v-model="form.productId" placeholder="请选择所属产品" class="select-width">
            <el-option
              v-for="dict in productList"
              :key="dict.id"
              :label="dict.productName"
              :value="dict.id"
            ></el-option>
          </el-select>
        </el-form-item>

        <!-- 父设备 -->
        <el-form-item label="父设备" prop="parentId">
          <el-input v-model="this.deviceDetailInfo.name" :disabled="true" />
        </el-form-item>

        <!-- 说明 -->
        <el-form-item label="说明" prop="description">
          <el-input v-model="form.description" type="textarea" placeholder="请输入内容"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
  </el-dialog>
</template>

<script>
import { addDevice, getDevice, updateDevice } from '@/api/iot/device'

import { queryProduct } from '@/api/iot/product'
import { mapState } from 'vuex'

export default {
    name: "ChildrenDeviceAddEdit",
    data() {
      return {
        //判断是否显示key和password输入框
        visible: false,
        //判断需要发的请求是新增还是修改
        type: null,
        //产品列表
        productList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          publishState: null,
          deviceType: null
        },
        // 表单参数
        form: {
          configuration: {}
        },
        // 表单校验
        rules: {
          id: [
            {required: true, message: "请输入设备ID", trigger: "blur"}
          ],
          deviceName: [
            {required: true, message: "请输入设备名称", trigger: "blur"}
          ],
          productId: [
            {required: true, message: "请选择所属产品", trigger: "blur"}
          ]
        },
      }
    },
    computed: {
      ...mapState({
        deviceDetailInfo: state => state.device.deviceDetailInfo
      }),
    },
    methods: {
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          id: null,
          configuration: {},
          gatewayDevice: null,
          productId: null,
          groupId: null,
          deviceName: null,
          deviceCode: null,
          deviceState: null,
          features: null,
          description: null,
          registryTime: null,
          createTime: null,
          updateTime: null
        };
        this.resetForm("form");
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.visible = false;
        this.reset();
        this.queryParams.deviceType = 'childrenDevice';
        queryProduct(this.queryParams).then(response => {
          this.productList = response.data;
        });
        this.type = 1;
        this.open = true;
        this.title = "添加设备";
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        this.visible = true;
        this.type = 0;
        const id = row.id;
        getDevice(id).then(response => {
          this.form = response.data;
          this.open = true;
          this.title = "修改设备";
        });
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.type === 0) {
              updateDevice(this.form).then(() => {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.$emit('update')
              });
            } else {
              this.form.configuration = JSON.stringify(this.form.configuration);
              this.form.parentId = this.deviceDetailInfo.id;
              addDevice(this.form).then(() => {
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.$emit('update')
              });
            }
          }
        });
      },
    }
  };
</script>

<style lang="scss" scoped>

</style>
